<template>
	<view class="report">
		<view class="report-main">
			<view class="choice-header">
				<view class="time-index">
					<view class="time-type" @click="closeIndex">
						<view :class="checkType=='day' ? 'time-item-ac':'time-item'" @click="check('day')">日</view>
						<view :class="checkType=='week' ? 'time-item-ac':'time-item'" @click="check('week')">周</view>
						<view :class="checkType=='month' ? 'time-item-ac':'time-item'" @click="check('month')">月</view>
					</view>
					<view class="index-type">
						<view class="choice-index" @click="showIndex">{{indexText}}</view>
						<img src="https://baxztech.com/bian_admin_api/public/bianmp/open-list.png" alt="" class="index-more" @click="showIndex">
						<view class="index-list" v-show="indexShow">
							<view class="index-item" @click="checkIndex('emotion')">心情指数</view>
							<view class="index-item" @click="checkIndex('stress')">压力指数</view>
							<view class="index-item" @click="checkIndex('tired')">精力指数</view>
						</view>
					</view>
				</view>
				<view class="show" @click="closeIndex">
					<view class="show-type">
						<block v-if="checkType==='day'">
							<view class="show-day">
								<view class="choice-day">{{choiceDay}}</view>
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/open-list.png" alt="" class="more-day"
									@click="openDayModal">
							</view>
						</block>
						<block v-if="checkType==='week'">
							<view class="show-week">
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/pre.png" alt="" class="pre-week" @click="preWeek">
								<view class="choice-week">{{choiceWeek.weekStr}}</view>
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/next.png" alt="" class="next-week" @click="nextWeek">
							</view>
						</block>
						<block v-if="checkType==='month'">
							<view class="show-month">
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/pre.png" alt="" class="pre-month" @click="preMonth">
								<view class="choice-month">{{choiceMonth.year+'-'+choiceMonth.month}}</view>
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/next.png" alt="" class="next-month" @click="nextMonth">
							</view>
						</block>

					</view>
					<view class="back">
						<view class="back-day" v-show="checkType=='day'" @click="toToday">回到今天</view>
						<view class="back-week" v-show="checkType=='week'" @click="toNowWeek">回到本周</view>
						<view class="back-month" v-show="checkType=='month'" @click="toNowMonth">回到本月</view>
					</view>
				</view>
			</view>
			<view class="chart-list" @click="closeIndex">
				<view class="day-chart" v-show="checkType==='day'">
					<view class="empty-data" v-show="today.length==0">
						<view class="empty-text">暂无数据</view>
					</view>
					<view class="chart-main" v-show="today.length>0">
						<view class="text-tag" v-show="indexType=='emotion'">
							<view class="text-tag-a">愉悦</view>
							<view class="text-tag-b">一般</view>
							<view class="text-tag-c">较差</view>
						</view>
						<view class="text-tag" v-show="indexType=='tired'">
							<view class="text-tag-aa">精力充沛</view>
							<view class="text-tag-bb">有点疲惫</view>
							<view class="text-tag-cc">十分疲惫</view>
						</view>
						<view class="text-tag" v-show="indexType=='stress'">
							<view class="text-tag-aaa">压力较大</view>
							<view class="text-tag-bbb">稍有压力</view>
							<view class="text-tag-ccc">放松</view>
						</view>
						<view class="chart-day">
							<view class="chart-day-main">
								<view class="bar-box-day" v-for="(item,index) in today" :key="index">
									<view class="bar-day"
										:style="{height:item[indexType]*2+'px',backgroundColor:colorFilter(item[indexType])}"
										v-if="item[indexType]!=-1"></view>
								</view>
							</view>
							<view class="point-line-a"></view>
							<view class="point-line-b"></view>
							<view class="mean-line" :style="{bottom:dayMean[indexType]*2+'px'}"
								v-show="today.length!=0">
							</view>
							<view class="mean-point" :style="{bottom:dayMean[indexType]*2-10+'px'}"
								v-show="today.length!=0">平均{{dayMean[indexType]}}</view>
							<view v-show="indexType=='emotion'||indexType=='tired'">
								<view class="line-a"></view>
								<view class="line-b"></view>
								<view class="line-c"></view>
								<view class="line-aa"></view>
								<view class="line-bb"></view>
								<view class="line-cc"></view>
							</view>
							<view v-show="indexType=='stress'">
								<view class="line-d"></view>
								<view class="line-e"></view>
								<view class="line-f"></view>
								<view class="line-dd"></view>
								<view class="line-ee"></view>
								<view class="line-ff"></view>
							</view>
						</view>
						<view class="num-tag">
							<view class="num-tag-a">100</view>
							<view class="num-tag-b">70</view>
							<view class="num-tag-c">50</view>
							<view class="num-tag-d">0</view>
						</view>
					</view>
					<view class="day-time-list" v-show="today.length>0">
						<view class="day-time-item">00</view>
						<view class="day-time-item">04</view>
						<view class="day-time-item">08</view>
						<view class="day-time-item">12</view>
						<view class="day-time-item">16</view>
						<view class="day-time-item">20</view>
						<view class="day-time-item">24</view>
					</view>
				</view>
				<view class="week-chart" v-show="checkType==='week'">
					<view class="empty-data" v-show="week.length==0">
						<view class="empty-text">暂无数据</view>
					</view>
					<view class="chart-main" v-show="week.length>0">
						<view class="text-tag" v-show="indexType=='emotion'">
							<view class="text-tag-a">愉悦</view>
							<view class="text-tag-b">一般</view>
							<view class="text-tag-c">较差</view>
						</view>
						<view class="text-tag" v-show="indexType=='tired'">
							<view class="text-tag-aa">精力充沛</view>
							<view class="text-tag-bb">有点疲惫</view>
							<view class="text-tag-cc">十分疲惫</view>
						</view>
						<view class="text-tag" v-show="indexType=='stress'">
							<view class="text-tag-aaa">压力较大</view>
							<view class="text-tag-bbb">稍有压力</view>
							<view class="text-tag-ccc">放松</view>
						</view>
						<view class="chart-week">
							<view class="chart-week-main">
								<view class="bar-box" v-for="(item,index) in week" :key="index">
									<view class="bar"
										:style="{height:item[indexType]*2+'px',backgroundColor:colorFilter(item[indexType])}"
										v-if="item[indexType]!=-1"></view>
								</view>
							</view>
							<view class="mean-line" :style="{bottom:weekMean[indexType]*2+'px'}"
								v-show="week.length!=0">
							</view>
							<view class="mean-point" :style="{bottom:weekMean[indexType]*2-10+'px'}"
								v-show="week.length!=0">平均{{weekMean[indexType]}}</view>
							<view class="point-line-a"></view>
							<view class="point-line-b"></view>
							<view v-show="indexType=='emotion'||indexType=='tired'">
								<view class="line-a"></view>
								<view class="line-b"></view>
								<view class="line-c"></view>
								<view class="line-aa"></view>
								<view class="line-bb"></view>
								<view class="line-cc"></view>
							</view>
							<view v-show="indexType=='stress'">
								<view class="line-d"></view>
								<view class="line-e"></view>
								<view class="line-f"></view>
								<view class="line-dd"></view>
								<view class="line-ee"></view>
								<view class="line-ff"></view>
							</view>
						</view>
						<view class="num-tag">
							<view class="num-tag-a">100</view>
							<view class="num-tag-b">70</view>
							<view class="num-tag-c">50</view>
							<view class="num-tag-d">0</view>
						</view>
					</view>
					<view class="week-time-list" v-show="week.length>0">
						<view class="week-time-item">一</view>
						<view class="week-time-item">二</view>
						<view class="week-time-item">三</view>
						<view class="week-time-item">四</view>
						<view class="week-time-item">五</view>
						<view class="week-time-item">六</view>
						<view class="week-time-item">日</view>
					</view>
				</view>
				<view class="month-chart" v-show="checkType==='month'">
					<view class="empty-data" v-show="month.length==0">
						<view class="empty-text">暂无数据</view>
					</view>
					<view class="chart-main" v-show="month.length>0">
						<view class="text-tag" v-show="indexType=='emotion'">
							<view class="text-tag-a">愉悦</view>
							<view class="text-tag-b">一般</view>
							<view class="text-tag-c">较差</view>
						</view>
						<view class="text-tag" v-show="indexType=='tired'">
							<view class="text-tag-aa">精力充沛</view>
							<view class="text-tag-bb">有点疲惫</view>
							<view class="text-tag-cc">十分疲惫</view>
						</view>
						<view class="text-tag" v-show="indexType=='stress'">
							<view class="text-tag-aaa">压力较大</view>
							<view class="text-tag-bbb">稍有压力</view>
							<view class="text-tag-ccc">放松</view>
						</view>
						<view class="chart-month">
							<view class="chart-month-main">
								<view class="bar-box-month" v-for="(item,index) in month" :key="index">
									<view class="bar-month"
										:style="{height:item[indexType]*2+'px',backgroundColor:colorFilter(item[indexType])}"
										v-if="item[indexType]!=-1"></view>
								</view>
							</view>
							<view class="mean-line" :style="{bottom:monthMean[indexType]*2+'px'}"
								v-show="month.length!=0"></view>
							<view class="mean-point" :style="{bottom:monthMean[indexType]*2-10+'px'}"
								v-show="month.length!=0">平均{{monthMean[indexType]}}</view>
							<view class="point-line-a"></view>
							<view class="point-line-b"></view>
							<view v-show="indexType=='emotion'||indexType=='tired'">
								<view class="line-a"></view>
								<view class="line-b"></view>
								<view class="line-c"></view>
								<view class="line-aa"></view>
								<view class="line-bb"></view>
								<view class="line-cc"></view>
							</view>
							<view v-show="indexType=='stress'">
								<view class="line-d"></view>
								<view class="line-e"></view>
								<view class="line-f"></view>
								<view class="line-dd"></view>
								<view class="line-ee"></view>
								<view class="line-ff"></view>
							</view>
						</view>
						<view class="num-tag">
							<view class="num-tag-a">100</view>
							<view class="num-tag-b">70</view>
							<view class="num-tag-c">50</view>
							<view class="num-tag-d">0</view>
						</view>
					</view>
					<view class="month-time-list" v-if="month.length==31">
						<view class="month-time-item">01</view>
						<view class="month-time-item">06</view>
						<view class="month-time-item">11</view>
						<view class="month-time-item">16</view>
						<view class="month-time-item">21</view>
						<view class="month-time-item">26</view>
						<view class="month-time-item">31</view>
					</view>
					<view class="month-time-list" v-if="month.length==30">
						<view class="month-time-item">01</view>
						<view class="month-time-item">06</view>
						<view class="month-time-item">11</view>
						<view class="month-time-item">16</view>
						<view class="month-time-item">21</view>
						<view class="month-time-item">26</view>
						<view class="month-time-item">30</view>
					</view>
					<view class="month-time-list" v-if="month.length==29">
						<view class="month-time-item">01</view>
						<view class="month-time-item">05</view>
						<view class="month-time-item">09</view>
						<view class="month-time-item">13</view>
						<view class="month-time-item">17</view>
						<view class="month-time-item">21</view>
						<view class="month-time-item">25</view>
						<view class="month-time-item">29</view>
					</view>
					<view class="month-time-list" v-if="month.length==28">
						<view class="month-time-item">01</view>
						<view class="month-time-item">05</view>
						<view class="month-time-item">09</view>
						<view class="month-time-item">13</view>
						<view class="month-time-item">17</view>
						<view class="month-time-item">21</view>
						<view class="month-time-item">25</view>
						<view class="month-time-item">28</view>
					</view>
				</view>
			</view>
			<view class="situation-list" @click="closeIndex">
				<view class="day-situation">
					<view class="situation-title" v-show="indexType=='emotion'&&checkType=='day'">今日心情情况</view>
					<view class="situation-title" v-show="indexType=='stress'&&checkType=='day'">今日压力情况</view>
					<view class="situation-title" v-show="indexType=='tired'&&checkType=='day'">今日精力情况</view>
					<view class="situation-title" v-show="indexType=='emotion'&&checkType=='week'">本周心情情况</view>
					<view class="situation-title" v-show="indexType=='stress'&&checkType=='week'">本周压力情况</view>
					<view class="situation-title" v-show="indexType=='tired'&&checkType=='week'">本周精力情况</view>
					<view class="situation-title" v-show="indexType=='emotion'&&checkType=='month'">本月心情情况</view>
					<view class="situation-title" v-show="indexType=='stress'&&checkType=='month'">本月压力情况</view>
					<view class="situation-title" v-show="indexType=='tired'&&checkType=='month'">本月精力情况</view>
					<view class="situation-main-empty" v-if="today.length==0&&checkType=='day'">
						<img src="https://baxztech.com/bian_admin_api/public/bianmp/nodata.png" alt="">
						<view class="empty-data-text">暂无数据</view>
					</view>
					<view class="situation-main-empty" v-if="week.length==0&&checkType=='week'">
						<img src="https://baxztech.com/bian_admin_api/public/bianmp/nodata.png" alt="">
						<view class="empty-data-text">暂无数据</view>
					</view>
					<view class="situation-main-empty" v-if="month.length==0&&checkType=='month'">
						<img src="https://baxztech.com/bian_admin_api/public/bianmp/nodata.png" alt="">
						<view class="empty-data-text">暂无数据</view>
					</view>
					<view class="situation-main" v-if="today.length>0&&checkType=='day'">
						<view class="situation-left">
							<view class="situation-end">
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/emotion1.png" class="situation-pic"
									v-if="imgFilter(dayMean[indexType])=='emotion1'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/emotion2.png" class="situation-pic"
									v-if="imgFilter(dayMean[indexType])=='emotion2'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/emotion3.png" class="situation-pic"
									v-if="imgFilter(dayMean[indexType])=='emotion3'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/tired1.png" class="situation-pic"
									v-if="imgFilter(dayMean[indexType])=='tired1'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/tired2.png" class="situation-pic"
									v-if="imgFilter(dayMean[indexType])=='tired2'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/tired3.png" class="situation-pic"
									v-if="imgFilter(dayMean[indexType])=='tired3'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/stress1.png" class="situation-pic"
									v-if="imgFilter(dayMean[indexType])=='stress1'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/stress2.png" class="situation-pic"
									v-if="imgFilter(dayMean[indexType])=='stress2'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/stress3.png" class="situation-pic"
									v-if="imgFilter(dayMean[indexType])=='stress3'" />
								<view class="situation-text" :style="{color:colorFilter(dayMean[indexType])}">
									{{testFilter(dayMean[indexType])}}
								</view>
							</view>
							<view class="situation-mean">
								<view class="mean-text">均值</view>
								<view class="situation-num">{{dayMean[indexType]}}</view>
							</view>
							<view class="contrast">
								<view class="pre-day">
									<view class="pre-day-text">昨天</view>
									<view class="pre-day-num" v-if="preday.length>0">{{predayMean[indexType]}}</view>
									<view class="pre-day-num-empty" v-if="preday.length==0">暂无数据</view>
								</view>
								<view class="contrast-percent" v-if="preday.length>0">
									<view class="contrast-text" v-if="dayMean[indexType]>=predayMean[indexType]">上升
									</view>
									<view class="contrast-text" v-if="dayMean[indexType]<predayMean[indexType]">下降
									</view>
									<view class="contrast-num">{{contrastDay()}}%</view>
								</view>
							</view>
						</view>
						<view class="contrast-chart">
							<view class="contrast-tag-list" v-show="indexType=='emotion'">
								<view class="contrast-tag-a">愉悦</view>
								<view class="contrast-tag-b">一般</view>
								<view class="contrast-tag-c">较差</view>
							</view>
							<view class="contrast-tag-list" v-show="indexType=='tired'">
								<view class="contrast-tag-aa">精力充沛</view>
								<view class="contrast-tag-bb">有点疲惫</view>
								<view class="contrast-tag-cc">十分疲惫</view>
							</view>
							<view class="contrast-tag-list" v-show="indexType=='stress'">
								<view class="contrast-tag-aaa">压力较大</view>
								<view class="contrast-tag-bbb">稍有压力</view>
								<view class="contrast-tag-ccc">放松</view>
							</view>
							<view class="day-contrast-chart">
<!-- 								<view class="contrast-line" v-show="indexType=='emotion'">
									<view class="contrast-line-a"></view>
									<view class="contrast-line-b"></view>
									<view class="contrast-line-c"></view>
								</view>
								<view class="contrast-line" v-show="indexType=='emotion'">
									<view class="contrast-line-aa"></view>
									<view class="contrast-line-bb"></view>
									<view class="contrast-line-cc"></view>
								</view> -->
<!-- 								<view class="contrast-line" v-show="indexType=='stress'">
									<view class="contrast-line-f"></view>
									<view class="contrast-line-e"></view>
									<view class="contrast-line-d"></view>
								</view>
								<view class="contrast-line" v-show="indexType=='stress'">
									<view class="contrast-line-ff"></view>
									<view class="contrast-line-ee"></view>
									<view class="contrast-line-dd"></view>
								</view> -->
								
								
								<view class="day-contrast-chart-main">
									<view class="column-box">
										<view class="preday-column"
											:style="{height:predayMean[indexType]*0.7+'px',backgroundColor:colorFilter(predayMean[indexType])}">
										</view>
									</view>
									<view class="column-box">
										<view class="today-column"
											:style="{height:dayMean[indexType]*0.7+'px',backgroundColor:colorFilter(dayMean[indexType])}">
										</view>
									</view>
								</view>
								<view class="contrast-point-line-a"></view>
								<view class="contrast-point-line-b"></view>
								<view class="contrast-line" v-show="indexType=='tired'||indexType=='emotion'">
									<view class="contrast-line-d"></view>
									<view class="contrast-line-e"></view>
									<view class="contrast-line-f"></view>
								</view>
								<view class="contrast-line" v-show="indexType=='tired'||indexType=='emotion'">
									<view class="contrast-line-dd"></view>
									<view class="contrast-line-ee"></view>
									<view class="contrast-line-ff"></view>
								</view>
								
								<view class="contrast-line" v-show="indexType=='stress'">
									<view class="contrast-line-a"></view>
									<view class="contrast-line-b"></view>
									<view class="contrast-line-c"></view>
								</view>
								<view class="contrast-line" v-show="indexType=='stress'">
									<view class="contrast-line-aa"></view>
									<view class="contrast-line-bb"></view>
									<view class="contrast-line-cc"></view>
								</view>
								
								
								<view class="contrast-date-list">
									<view class="contrast-preday">昨天</view>
									<view class="contrast-today">今天</view>
								</view>
							</view>
							<view class="contrast-tag">
								<view class="contrast-a">100</view>
								<view class="contrast-b">70</view>
								<view class="contrast-c">50</view>
								<view class="contrast-d">0</view>
							</view>
						</view>
					</view>
					<view class="situation-main" v-if="week.length>0&&checkType=='week'">
						<view class="situation-left">
							<view class="situation-end">
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/emotion1.png" class="situation-pic"
									v-if="imgFilter(weekMean[indexType])=='emotion1'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/emotion2.png" class="situation-pic"
									v-if="imgFilter(weekMean[indexType])=='emotion2'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/emotion3.png" class="situation-pic"
									v-if="imgFilter(weekMean[indexType])=='emotion3'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/tired1.png" class="situation-pic"
									v-if="imgFilter(weekMean[indexType])=='tired1'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/tired2.png" class="situation-pic"
									v-if="imgFilter(weekMean[indexType])=='tired2'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/tired3.png" class="situation-pic"
									v-if="imgFilter(weekMean[indexType])=='tired3'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/stress1.png" class="situation-pic"
									v-if="imgFilter(weekMean[indexType])=='stress1'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/stress2.png" class="situation-pic"
									v-if="imgFilter(weekMean[indexType])=='stress2'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/stress3.png" class="situation-pic"
									v-if="imgFilter(weekMean[indexType])=='stress3'" />
								<view class="situation-text" :style="{color:colorFilter(weekMean[indexType])}">
									{{testFilter(weekMean[indexType])}}
								</view>
							</view>
							<view class="situation-mean">
								<view class="mean-text">均值</view>
								<view class="situation-num">{{weekMean[indexType]}}</view>
							</view>
							<view class="contrast">
								<view class="pre-day">
									<view class="pre-day-text">上周</view>
									<view class="pre-day-num" v-if="preweek.length>0">{{preweekMean[indexType]}}</view>
									<view class="pre-day-num-empty" v-if="preweek.length==0">暂无数据</view>
								</view>
								<view class="contrast-percent" v-if="preweek.length>0">
									<view class="contrast-text" v-if="weekMean[indexType]>=preweekMean[indexType]">上升
									</view>
									<view class="contrast-text" v-if="weekMean[indexType]<preweekMean[indexType]">下降
									</view>
									<view class="contrast-num">{{contrastWeek()}}%</view>
								</view>
							</view>
						</view>
						<view class="contrast-chart">
							<view class="contrast-tag-list" v-show="indexType=='emotion'">
								<view class="contrast-tag-a">愉悦</view>
								<view class="contrast-tag-b">一般</view>
								<view class="contrast-tag-c">较差</view>
							</view>
							<view class="contrast-tag-list" v-show="indexType=='tired'">
								<view class="contrast-tag-aa">精力充沛</view>
								<view class="contrast-tag-bb">有点疲惫</view>
								<view class="contrast-tag-cc">十分疲惫</view>
							</view>
							<view class="contrast-tag-list" v-show="indexType=='stress'">
								<view class="contrast-tag-aaa">压力较大</view>
								<view class="contrast-tag-bbb">稍有压力</view>
								<view class="contrast-tag-ccc">放松</view>
							</view>
							<view class="day-contrast-chart">
								<view class="contrast-line" v-show="indexType=='emotion'">
									<view class="contrast-line-a"></view>
									<view class="contrast-line-b"></view>
									<view class="contrast-line-c"></view>
								</view>
								<view class="contrast-line" v-show="indexType=='emotion'">
									<view class="contrast-line-aa"></view>
									<view class="contrast-line-bb"></view>
									<view class="contrast-line-cc"></view>
								</view>
								<view class="day-contrast-chart-main">
									<view class="column-box">
										<view class="preday-column"
											:style="{height:preweekMean[indexType]*0.7+'px',backgroundColor:colorFilter(preweekMean[indexType])}">
										</view>
									</view>
									<view class="column-box">
										<view class="today-column"
											:style="{height:weekMean[indexType]*0.7+'px',backgroundColor:colorFilter(weekMean[indexType])}">
										</view>
									</view>
								</view>
								<view class="contrast-point-line-a"></view>
								<view class="contrast-point-line-b"></view>
								<view class="contrast-line" v-show="indexType=='tired'||indexType=='emotion'">
									<view class="contrast-line-d"></view>
									<view class="contrast-line-e"></view>
									<view class="contrast-line-f"></view>
								</view>
								<view class="contrast-line" v-show="indexType=='tired'||indexType=='emotion'">
									<view class="contrast-line-dd"></view>
									<view class="contrast-line-ee"></view>
									<view class="contrast-line-ff"></view>
								</view>
								
								<view class="contrast-line" v-show="indexType=='stress'">
									<view class="contrast-line-a"></view>
									<view class="contrast-line-b"></view>
									<view class="contrast-line-c"></view>
								</view>
								<view class="contrast-line" v-show="indexType=='stress'">
									<view class="contrast-line-aa"></view>
									<view class="contrast-line-bb"></view>
									<view class="contrast-line-cc"></view>
								</view>
								<view class="contrast-date-list">
									<view class="contrast-preday">上周</view>
									<view class="contrast-today">本周</view>
								</view>
							</view>
							<view class="contrast-tag">
								<view class="contrast-a">100</view>
								<view class="contrast-b">70</view>
								<view class="contrast-c">50</view>
								<view class="contrast-d">0</view>
							</view>
						</view>
					</view>
					<view class="situation-main" v-if="month.length>0&&checkType=='month'">
						<view class="situation-left">
							<view class="situation-end">
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/emotion1.png" class="situation-pic"
									v-if="imgFilter(monthMean[indexType])=='emotion1'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/emotion2.png" class="situation-pic"
									v-if="imgFilter(monthMean[indexType])=='emotion2'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/emotion3.png" class="situation-pic"
									v-if="imgFilter(monthMean[indexType])=='emotion3'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/tired1.png" class="situation-pic"
									v-if="imgFilter(monthMean[indexType])=='tired1'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/tired2.png" class="situation-pic"
									v-if="imgFilter(monthMean[indexType])=='tired2'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/tired3.png" class="situation-pic"
									v-if="imgFilter(monthMean[indexType])=='tired3'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/stress1.png" class="situation-pic"
									v-if="imgFilter(monthMean[indexType])=='stress1'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/stress2.png" class="situation-pic"
									v-if="imgFilter(monthMean[indexType])=='stress2'" />
								<img src="https://baxztech.com/bian_admin_api/public/bianmp/stress3.png" class="situation-pic"
									v-if="imgFilter(monthMean[indexType])=='stress3'" />
								<view class="situation-text" :style="{color:colorFilter(monthMean[indexType])}">
									{{testFilter(monthMean[indexType])}}
								</view>
							</view>
							<view class="situation-mean">
								<view class="mean-text">均值</view>
								<view class="situation-num">{{monthMean[indexType]}}</view>
							</view>
							<view class="contrast">
								<view class="pre-day">
									<view class="pre-day-text">上月</view>
									<view class="pre-day-num" v-if="premonth.length>0">{{premonthMean[indexType]}}
									</view>
									<view class="pre-day-num-empty" v-if="premonth.length==0">暂无数据</view>
								</view>
								<view class="contrast-percent" v-if="premonth.length>0">
									<view class="contrast-text" v-if="monthMean[indexType]>=premonthMean[indexType]">上升
									</view>
									<view class="contrast-text" v-if="monthMean[indexType]<premonthMean[indexType]">下降
									</view>
									<view class="contrast-num">{{contrastMonth()}}%</view>
								</view>
							</view>
						</view>
						<view class="contrast-chart">
							<view class="contrast-tag-list" v-show="indexType=='emotion'">
								<view class="contrast-tag-a">愉悦</view>
								<view class="contrast-tag-b">一般</view>
								<view class="contrast-tag-c">较差</view>
							</view>
							<view class="contrast-tag-list" v-show="indexType=='tired'">
								<view class="contrast-tag-aa">精力充沛</view>
								<view class="contrast-tag-bb">有点疲惫</view>
								<view class="contrast-tag-cc">十分疲惫</view>
							</view>
							<view class="contrast-tag-list" v-show="indexType=='stress'">
								<view class="contrast-tag-aaa">压力较大</view>
								<view class="contrast-tag-bbb">稍有压力</view>
								<view class="contrast-tag-ccc">放松</view>
							</view>
							<view class="day-contrast-chart">
								<view class="contrast-line" v-show="indexType=='emotion'">
									<view class="contrast-line-a"></view>
									<view class="contrast-line-b"></view>
									<view class="contrast-line-c"></view>
								</view>
								<view class="contrast-line" v-show="indexType=='emotion'">
									<view class="contrast-line-aa"></view>
									<view class="contrast-line-bb"></view>
									<view class="contrast-line-cc"></view>
								</view>
								<view class="day-contrast-chart-main">
									<view class="column-box">
										<view class="preday-column"
											:style="{height:premonthMean[indexType]*0.7+'px',backgroundColor:colorFilter(premonthMean[indexType])}">
										</view>
									</view>
									<view class="column-box">
										<view class="today-column"
											:style="{height:monthMean[indexType]*0.7+'px',backgroundColor:colorFilter(monthMean[indexType])}">
										</view>
									</view>
								</view>
								<view class="contrast-point-line-a"></view>
								<view class="contrast-point-line-b"></view>
								<view class="contrast-line" v-show="indexType=='tired'||indexType=='emotion'">
									<view class="contrast-line-d"></view>
									<view class="contrast-line-e"></view>
									<view class="contrast-line-f"></view>
								</view>
								<view class="contrast-line" v-show="indexType=='tired'||indexType=='emotion'">
									<view class="contrast-line-dd"></view>
									<view class="contrast-line-ee"></view>
									<view class="contrast-line-ff"></view>
								</view>
								
								<view class="contrast-line" v-show="indexType=='stress'">
									<view class="contrast-line-a"></view>
									<view class="contrast-line-b"></view>
									<view class="contrast-line-c"></view>
								</view>
								<view class="contrast-line" v-show="indexType=='stress'">
									<view class="contrast-line-aa"></view>
									<view class="contrast-line-bb"></view>
									<view class="contrast-line-cc"></view>
								</view>
								<view class="contrast-date-list">
									<view class="contrast-preday">上月</view>
									<view class="contrast-today">本月</view>
								</view>
							</view>
							<view class="contrast-tag">
								<view class="contrast-a">100</view>
								<view class="contrast-b">70</view>
								<view class="contrast-c">50</view>
								<view class="contrast-d">0</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="percentage-list" @click="closeIndex">
				<view class="percentage-title">{{dateStrType[checkType]}}{{emoStrType[indexType]}}占比</view>
				
				<block v-if="checkType=='day'">
					<view class="percentage-main">
						<view class="percentage-empty" v-if="today.length==0">
							<img src="https://baxztech.com/bian_admin_api/public/bianmp/nodata.png" alt="">
							<view class="empty-data-text">暂无数据</view>
						</view>
						<view v-else class="percentage-chart" id="percentage-chart-day">
							<l-echart style="width: 90px;height: 90px;" ref="percentageChartDayDom"></l-echart>
						</view>
						<block v-if="today.length>0">
							<view class="percentage-point">
								<view class="percentage-point-item">
									<view class="item-point-color percentage-a" v-show="indexType=='emotion'"></view>
									<view class="item-point-text" v-show="indexType=='emotion'">愉悦</view>
									<view class="item-point-color percentage-aa" v-show="indexType=='stress'"></view>
									<view class="item-point-text" v-show="indexType=='stress'">压力较大</view>
									<view class="item-point-color percentage-aa" v-show="indexType=='tired'"></view>
									<view class="item-point-text" v-show="indexType=='tired'">十分疲惫</view>
								</view>
								<view class="percentage-point-item">
									<view class="item-point-color percentage-b" v-show="indexType=='emotion'"></view>
									<view class="item-point-text" v-show="indexType=='emotion'">一般</view>
									<view class="item-point-color percentage-bb" v-show="indexType=='stress'"></view>
									<view class="item-point-text" v-show="indexType=='stress'">稍有压力</view>
									<view class="item-point-color percentage-bb" v-show="indexType=='tired'"></view>
									<view class="item-point-text" v-show="indexType=='tired'">有点疲惫</view>
								</view>
								<view class="percentage-point-item">
									<view class="item-point-color percentage-c" v-show="indexType=='emotion'"></view>
									<view class="item-point-text" v-show="indexType=='emotion'">较差</view>
									<view class="item-point-color percentage-cc" v-show="indexType=='stress'"></view>
									<view class="item-point-text" v-show="indexType=='stress'">放松</view>
									<view class="item-point-color percentage-cc" v-show="indexType=='tired'"></view>
									<view class="item-point-text" v-show="indexType=='tired'">精力充沛</view>
								</view>
							</view>
							<view class="percentage-num">
								<view class="percentage-num-item">{{dayPercent[indexType][0]}}%</view>
								<view class="percentage-num-item">{{dayPercent[indexType][1]}}%</view>
								<view class="percentage-num-item">{{dayPercent[indexType][2]}}%</view>
							</view>
						</block>
					</view>
				</block>
				
				<block v-if="checkType=='week'">
					<view class="percentage-main">
						<view class="percentage-empty" v-if="week.length==0">
							<img src="https://baxztech.com/bian_admin_api/public/bianmp/nodata.png" alt="">
							<view class="empty-data-text">暂无数据</view>
						</view>
						<view class="percentage-chart" id="percentage-chart-week">
							<l-echart style="width: 90px;height: 90px;" ref="percentageChartWeekDom"></l-echart>
						</view>
						<block v-if="week.length>0">
							<view class="percentage-point">
								<view class="percentage-point-item">
									<view class="item-point-color percentage-a" v-show="indexType=='emotion'"></view>
									<view class="item-point-text" v-show="indexType=='emotion'">愉悦</view>
									<view class="item-point-color percentage-aa" v-show="indexType=='stress'"></view>
									<view class="item-point-text" v-show="indexType=='stress'">压力较大</view>
									<view class="item-point-color percentage-aa" v-show="indexType=='tired'"></view>
									<view class="item-point-text" v-show="indexType=='tired'">十分疲惫</view>
								</view>
								<view class="percentage-point-item">
									<view class="item-point-color percentage-b" v-show="indexType=='emotion'"></view>
									<view class="item-point-text" v-show="indexType=='emotion'">一般</view>
									<view class="item-point-color percentage-bb" v-show="indexType=='stress'"></view>
									<view class="item-point-text" v-show="indexType=='stress'">稍有压力</view>
									<view class="item-point-color percentage-bb" v-show="indexType=='tired'"></view>
									<view class="item-point-text" v-show="indexType=='tired'">有点疲惫</view>
								</view>
								<view class="percentage-point-item">
									<view class="item-point-color percentage-c" v-show="indexType=='emotion'"></view>
									<view class="item-point-text" v-show="indexType=='emotion'">较差</view>
									<view class="item-point-color percentage-cc" v-show="indexType=='stress'"></view>
									<view class="item-point-text" v-show="indexType=='stress'">放松</view>
									<view class="item-point-color percentage-cc" v-show="indexType=='tired'"></view>
									<view class="item-point-text" v-show="indexType=='tired'">精力充沛</view>
								</view>
							</view>
							<view class="percentage-num">
								<view class="percentage-num-item">{{weekPercent[indexType][0]}}%</view>
								<view class="percentage-num-item">{{weekPercent[indexType][1]}}%</view>
								<view class="percentage-num-item">{{weekPercent[indexType][2]}}%</view>
							</view>
						</block>
					</view>
				</block>
				
				<block v-if="checkType=='month'">
					<view class="percentage-main">
						<view class="percentage-empty" v-if="month.length==0">
							<img src="https://baxztech.com/bian_admin_api/public/bianmp/nodata.png" alt="">
							<view class="empty-data-text">暂无数据</view>
						</view>
						<view class="percentage-chart" id="percentage-chart-month">
							<l-echart style="width: 90px;height: 90px;" ref="percentageChartDomMonthDom"></l-echart>
						</view>
						<block v-if="month.length>0">
							<view class="percentage-point">
								<view class="percentage-point-item">
									<view class="item-point-color percentage-a" v-show="indexType=='emotion'"></view>
									<view class="item-point-text" v-show="indexType=='emotion'">愉悦</view>
									<view class="item-point-color percentage-aa" v-show="indexType=='stress'"></view>
									<view class="item-point-text" v-show="indexType=='stress'">压力较大</view>
									<view class="item-point-color percentage-aa" v-show="indexType=='tired'"></view>
									<view class="item-point-text" v-show="indexType=='tired'">十分疲惫</view>
								</view>
								<view class="percentage-point-item">
									<view class="item-point-color percentage-b" v-show="indexType=='emotion'"></view>
									<view class="item-point-text" v-show="indexType=='emotion'">一般</view>
									<view class="item-point-color percentage-bb" v-show="indexType=='stress'"></view>
									<view class="item-point-text" v-show="indexType=='stress'">稍有压力</view>
									<view class="item-point-color percentage-bb" v-show="indexType=='tired'"></view>
									<view class="item-point-text" v-show="indexType=='tired'">有点疲惫</view>
								</view>
								<view class="percentage-point-item">
									<view class="item-point-color percentage-c" v-show="indexType=='emotion'"></view>
									<view class="item-point-text" v-show="indexType=='emotion'">较差</view>
									<view class="item-point-color percentage-cc" v-show="indexType=='stress'"></view>
									<view class="item-point-text" v-show="indexType=='stress'">放松</view>
									<view class="item-point-color percentage-cc" v-show="indexType=='tired'"></view>
									<view class="item-point-text" v-show="indexType=='tired'">精力充沛</view>
								</view>
							</view>
							<view class="percentage-num">
								<view class="percentage-num-item">{{monthPercent[indexType][0]}}%</view>
								<view class="percentage-num-item">{{monthPercent[indexType][1]}}%</view>
								<view class="percentage-num-item">{{monthPercent[indexType][2]}}%</view>
							</view>
						</block>
					</view>
				</block>
			</view>
		</view>
		<view class="data-day-modal" v-show="dayModal" @click="closeIndex">
			<view class="data-day">
				<img src="https://baxztech.com/bian_admin_api/public/bianmp/welcome-close.png" alt="" class="close" @click="closeDayModal">
				<view class="day-month" v-for="(item,index ) in allMonthData" :key="index">
					<view class="month-title">{{item.year+'-'+item.month}}</view>
					<view class="day-list">
						<view class="day-box" v-for="(t,i) in item.days" :key="i">
							<button :class="t.has==0 ? 'day':'day-ac'" :disabled="t.has==0"
								@click="checkDay(t.time)">{{t.day}}</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			LEchart
		},
		data() {
			return {
				dateStrType:{
					'day':'今日',
					'week':'本周',
					'month':'本月'
				},
				emoStrType:{
					'emotion':'心情',
					'tired':'精力',
					'stress':'压力'
				},
				checkType: 'day',
				indexShow: false,
				indexType: 'emotion',
				indexText: '心情指数',
				imei: '',
				loginPhone: '',
				allMonthData: [],
				dayModal: false,
				choiceDay: '',
				choiceDayTime: '',
				today: [],
				preday: [],
				dayMean: {},
				predayMean: {},
				dayPercent: {},
				dayPercentAll: {},
				percentageChartDomDay: '',
				allWeekList: [],
				choiceWeek: '',
				choiceWeekNum: 12,
				week: [],
				preweek: [],
				weekMean: {},
				preweekMean: {},
				weekPercent: {},
				weekPercentAll: {},
				percentageChartDomWeek: '',
				allMonthList: [],
				choiceMonthNum: 3,
				choiceMonth: '',
				month: [],
				premonth: [],
				monthMean: {},
				premonthMean: {},
				monthPercent: {},
				monthPercentAll: {},
				percentageChartDomMonth: '',
			};
		},
		computed: {
			...mapState(['member']),
		},
		methods: {
			check(type) {
				this.checkType = type
				if (type == 'day') {
					this.dayReport()
				}
				if (type == 'week') {
					this.weekReport(this.member.phone, this.choiceWeek.startTime, this.choiceWeek.endTime, this.allWeekList[
						this.choiceWeekNum - 1].startTime, this.allWeekList[this.choiceWeekNum - 1].endTime)
				}
				if (type == 'month') {
					this.monthReport(this.member.phone, this.choiceMonth.startTime, this.choiceMonth.endTime, this
						.allMonthList[this.choiceMonthNum - 1].startTime, this.allMonthList[this.choiceMonthNum - 1]
						.endTime)
				}
			},
			showIndex() {
				this.indexShow = true
			},
			closeIndex() {
				this.indexShow = false
			},
			checkIndex(type) {
				this.indexType = type
				if (this.indexType == 'emotion') {
					this.indexText = '心情指数'
				}
				if (this.indexType == 'stress') {
					this.indexText = '压力指数'
				}
				if (this.indexType == 'tired') {
					this.indexText = '精力指数'
				}
				this.indexShow = false
				if (this.today.length > 0) {
					this.percentageChartDay()
				}
				if (this.week.length > 0) {
					this.percentageChartWeek()
				}
				if (this.month.length > 0) {
					this.percentageChartMonth()
				}
			},
			openDayModal() {
				this.dayModal = true
			},
			closeDayModal() {
				this.dayModal = false
			},
			dataDay() {
				uni.$u.http.post('/client/data_day', {
					phone: this.member.phone
				}).then(res => {
					if (res.status == 200) {
						this.allMonthData = res.data.allMonthData
					}
				});
			},
			checkDay(time) {
				let date = new Date(time * 1000)
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				this.choiceDay = year + '年' + month + '月' + day + '日'
				this.choiceDayTime = time
				this.dayModal = false
				this.dayReport()
			},
			dayReport() {
				uni.$u.http.post('/client/day_report', {
					phone: this.member.phone,
					time: this.choiceDayTime
				}).then(res => {
					if (res.status == 200) {
						this.today = res.data.today || []
						this.preday = res.data.preday || []
						let dayEmotionSum = 0;
						let dayEmotionLn = 0;
						let dayTiredSum = 0;
						let dayTiredLn = 0;
						let dayStressSum = 0;
						let dayStressLn = 0;
						let dayEmotionA = 0;
						let dayEmotionB = 0;
						let dayEmotionC = 0;
						let dayStressA = 0;
						let dayStressB = 0;
						let dayStressC = 0;
						let dayTiredA = 0;
						let dayTiredB = 0;
						let dayTiredC = 0;
						this.today.forEach(item => {
							if (item.emotion != -1) {
								dayEmotionSum += item.emotion;
								dayEmotionLn += 1;
								if (item.emotion >= 0 && item.emotion <= 49) {
									dayEmotionA += 1
								}
								if (item.emotion >= 50 && item.emotion <= 69) {
									dayEmotionB += 1
								}
								if (item.emotion >= 70 && item.emotion <= 100) {
									dayEmotionC += 1
								}
							}
							if (item.tired != -1) {
								item.tired = 100-item.tired;
								dayTiredSum += item.tired;
								dayTiredLn += 1;
								if (item.tired >= 0 && item.tired <= 49) {
									dayTiredC += 1
								}
								if (item.tired >= 50 && item.tired <= 69) {
									dayTiredB += 1
								}
								if (item.tired >= 70 && item.tired <= 100) {
									dayTiredA += 1
								}
							}
							if (item.stress != -1) {
								// item.stress = 100-item.stress;
								dayStressSum += item.stress;
								dayStressLn += 1
								if (item.stress >= 0 && item.stress <= 49) {
									dayStressA += 1
								}
								if (item.stress >= 50 && item.stress <= 69) {
									dayStressB += 1
								}
								if (item.stress >= 70 && item.stress <= 100) {
									dayStressC += 1
								}
							}
						})
						let dayEmotionAll = dayEmotionA + dayEmotionB + dayEmotionC
						let dayStressAll = dayStressA + dayStressB + dayStressC
						let dayTiredAll = dayTiredA + dayTiredB + dayTiredC
						this.dayMean.emotion = parseInt(dayEmotionSum / dayEmotionLn)
						this.dayMean.tired = parseInt(dayTiredSum / dayTiredLn)
						this.dayMean.stress = parseInt(dayStressSum / dayStressLn)
						this.dayPercent.emotion = [Math.round(dayEmotionC / dayEmotionAll * 100), Math.round(
							dayEmotionB / dayEmotionAll * 100), Math.round(dayEmotionA / dayEmotionAll *
							100)]
						this.dayPercent.tired = [Math.round(dayTiredC / dayTiredAll * 100), Math.round(dayTiredB /
							dayTiredAll * 100), Math.round(dayTiredA / dayTiredAll * 100)]
						this.dayPercent.stress = [Math.round(dayStressC / dayStressAll * 100), Math.round(
							dayStressB / dayStressAll * 100), Math.round(dayStressA / dayStressAll * 100)]
						this.dayPercentAll.emotion = [{
							value: dayEmotionC
						}, {
							value: dayEmotionB
						}, {
							value: dayEmotionA
						}]
						this.dayPercentAll.stress = [{
							value: dayStressC
						}, {
							value: dayStressB
						}, {
							value: dayStressA
						}]
						this.dayPercentAll.tired = [{
							value: dayTiredA
						}, {
							value: dayTiredB
						}, {
							value: dayTiredC
						}]
						let predayEmotionSum = 0;
						let predayEmotionLn = 0;
						let predayTiredSum = 0;
						let predayTiredLn = 0;
						let predayStressSum = 0;
						let predayStressLn = 0;
						this.preday.forEach(item => {
							if (item.emotion != -1) {
								predayEmotionSum += item.emotion;
								predayEmotionLn += 1;
							}
							if (item.tired != -1) {
								item.tired = 100-item.tired;
								predayTiredSum += item.tired;
								predayTiredLn += 1;
							}
							if (item.stress != -1) {
								// item.stress = 100-item.stress;
								predayStressSum += item.stress;
								predayStressLn += 1
							}
						})
						this.predayMean.emotion = parseInt(predayEmotionSum / predayEmotionLn)
						this.predayMean.tired = parseInt(predayTiredSum / predayTiredLn)
						this.predayMean.stress = parseInt(predayStressSum / predayStressLn)
						if (this.today.length > 0) {
							this.percentageChartDay()
						}
					}
				});
			},
			toToday() {
				let date = new Date()
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				this.choiceDay = year + '年' + month + '月' + day + '日';
				this.choiceDayTime = parseInt(date.getTime() / 1000);
				this.dayReport()
			},
			percentageChartDay() {
				let colorList = ['#55CF04', '#01D6D6', '#FF0036']
				if (this.indexType == "stress") {
					colorList = ['#FF0036', '#01D6D6', '#55CF04']
				}
				let data = this.dayPercentAll[this.indexType]
				let option = {
					series: [{
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						labelLine: {
							show: false
						},
						data: data,
						itemStyle: {
							normal: {
								color: function(colors) {
									return colorList[colors.dataIndex]
								}
							}
						}
					}]
				};
				this.$nextTick(()=>{
					if(!this.$refs.percentageChartDayDom) return;
					this.$refs.percentageChartDayDom.init(echarts, chart => {
						chart.setOption(option);
					});
				})
				
			},
			contrastDay() {
				let preMean = this.predayMean[this.indexType]
				let todayMean = this.dayMean[this.indexType]
				let difEnd = null
				if (todayMean >= preMean) {
					let dif = (todayMean / preMean - 1) * 100
					difEnd = dif.toFixed(1)
				}
				if (todayMean < preMean) {
					let dif = (1 - todayMean / preMean) * 100
					difEnd = dif.toFixed(1)
				}
				return difEnd
			},
			dataWeek() {
				uni.$u.http.post('/client/data_week', {
					phone: this.member.phone
				}).then(res => {
					if (res.status == 200) {
						this.allWeekList = res.data.dateList
						this.choiceWeekNum = res.data.dateList.length - 1
						this.choiceWeek = res.data.dateList[this.choiceWeekNum]
						this.weekReport(this.loginPhone, this.choiceWeek.startTime, this.choiceWeek.endTime, this
							.allWeekList[this.choiceWeekNum - 1].startTime, this.allWeekList[this
								.choiceWeekNum - 1].endTime)
					}
				});
			},
			weekReport(phone, startTime, endTime, preStartTime, preEndTime) {
				uni.$u.http.post('/client/week_report', {
					phone,
					startTime,
					endTime,
					preStartTime,
					preEndTime
				}).then(res => {
					if (res.status == 200) {
						this.week = res.data.week
						this.preweek = res.data.preweek
						let dayEmotionSum = 0;
						let dayEmotionLn = 0;
						let dayTiredSum = 0;
						let dayTiredLn = 0;
						let dayStressSum = 0;
						let dayStressLn = 0;
						let dayEmotionA = 0;
						let dayEmotionB = 0;
						let dayEmotionC = 0;
						let dayStressA = 0;
						let dayStressB = 0;
						let dayStressC = 0;
						let dayTiredA = 0;
						let dayTiredB = 0;
						let dayTiredC = 0;
						res.data.week.forEach(item => {
							if (item.emotion != -1) {
								dayEmotionSum += item.emotion;
								dayEmotionLn += 1;
								if (item.emotion >= 0 && item.emotion <= 49) {
									dayEmotionA += 1
								}
								if (item.emotion >= 50 && item.emotion <= 69) {
									dayEmotionB += 1
								}
								if (item.emotion >= 70 && item.emotion <= 100) {
									dayEmotionC += 1
								}
							}
							if (item.tired != -1) {
								item.tired = 100-item.tired;
								dayTiredSum += item.tired;
								dayTiredLn += 1;
								if (item.tired >= 0 && item.tired <= 49) {
									dayTiredC += 1
								}
								if (item.tired >= 50 && item.tired <= 69) {
									dayTiredB += 1
								}
								if (item.tired >= 70 && item.tired <= 100) {
									dayTiredA += 1
								}
							}
							if (item.stress != -1) {
								// item.stress = 100-item.stress;
								dayStressSum += item.stress;
								dayStressLn += 1
								if (item.stress >= 0 && item.stress <= 49) {
									dayStressA += 1
								}
								if (item.stress >= 50 && item.stress <= 69) {
									dayStressB += 1
								}
								if (item.stress >= 70 && item.stress <= 100) {
									dayStressC += 1
								}
							}
						})
						let dayEmotionAll = dayEmotionA + dayEmotionB + dayEmotionC
						let dayStressAll = dayStressA + dayStressB + dayStressC
						let dayTiredAll = dayTiredA + dayTiredB + dayTiredC
						this.weekMean.emotion = parseInt(dayEmotionSum / dayEmotionLn)
						this.weekMean.tired = parseInt(dayTiredSum / dayTiredLn)
						this.weekMean.stress = parseInt(dayStressSum / dayStressLn)
						this.weekPercent.emotion = [Math.round(dayEmotionC / dayEmotionAll * 100), Math.round(
							dayEmotionB / dayEmotionAll * 100), Math.round(dayEmotionA / dayEmotionAll *
							100)]
						this.weekPercent.tired = [Math.round(dayTiredC / dayTiredAll * 100), Math.round(dayTiredB /
							dayTiredAll * 100), Math.round(dayTiredA / dayTiredAll * 100)]
						this.weekPercent.stress = [Math.round(dayStressC / dayStressAll * 100), Math.round(
							dayStressB / dayStressAll * 100), Math.round(dayStressA / dayStressAll * 100)]
						this.weekPercentAll.emotion = [{
							value: dayEmotionC
						}, {
							value: dayEmotionB
						}, {
							value: dayEmotionA
						}]
						this.weekPercentAll.stress = [{
							value: dayStressC
						}, {
							value: dayStressB
						}, {
							value: dayStressA
						}]
						this.weekPercentAll.tired = [{
							value: dayTiredA
						}, {
							value: dayTiredB
						}, {
							value: dayTiredC
						}]
						let predayEmotionSum = 0;
						let predayEmotionLn = 0;
						let predayTiredSum = 0;
						let predayTiredLn = 0;
						let predayStressSum = 0;
						let predayStressLn = 0;
						res.data.preweek.forEach(item => {
							if (item.emotion != -1) {
								predayEmotionSum += item.emotion;
								predayEmotionLn += 1;
							}
							if (item.tired != -1) {
								item.tired = 100-item.tired;
								predayTiredSum += item.tired;
								predayTiredLn += 1;
							}
							if (item.stress != -1) {
								// item.stress = 100-item.stress;
								predayStressSum += item.stress;
								predayStressLn += 1
							}
						})
						this.preweekMean.emotion = parseInt(predayEmotionSum / predayEmotionLn)
						this.preweekMean.tired = parseInt(predayTiredSum / predayTiredLn)
						this.preweekMean.stress = parseInt(predayStressSum / predayStressLn)
						if (this.week.length > 0) {
							this.percentageChartWeek()
						}
					}
				});
			},
			preWeek() {
				let num = this.choiceWeekNum
				num = num - 1
				if (num < 1) {
					this.$toast('已到最前');
					num = 1
				}
				this.choiceWeekNum = num
				this.choiceWeek = this.allWeekList[this.choiceWeekNum]
				this.weekReport(this.loginPhone, this.choiceWeek.startTime, this.choiceWeek.endTime, this.allWeekList[this
					.choiceWeekNum - 1].startTime, this.allWeekList[this.choiceWeekNum - 1].endTime)
			},
			nextWeek() {
				let num = this.choiceWeekNum
				num = num + 1
				if (num > this.allWeekList.length - 1) {
					this.$toast('已到最后');
					num = this.allWeekList.length - 1
				}
				this.choiceWeekNum = num
				this.choiceWeek = this.allWeekList[this.choiceWeekNum]
				this.weekReport(this.loginPhone, this.choiceWeek.startTime, this.choiceWeek.endTime, this.allWeekList[this
					.choiceWeekNum - 1].startTime, this.allWeekList[this.choiceWeekNum - 1].endTime)
			},
			toNowWeek() {
				this.choiceWeekNum = this.allWeekList.length - 1
				this.choiceWeek = this.allWeekList[this.choiceWeekNum]
				this.weekReport(this.imei, this.choiceWeek.startTime, this.choiceWeek.endTime, this.allWeekList[this
					.choiceWeekNum - 1].startTime, this.allWeekList[this.choiceWeekNum - 1].endTime)
			},
			percentageChartWeek() {
				let colorList = ['#55CF04', '#01D6D6', '#FF0036']
				if (this.indexType == "stress") {
					colorList = ['#FF0036', '#01D6D6', '#55CF04']
				}
				let data = this.weekPercentAll[this.indexType]
				let option = {
					series: [{
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						labelLine: {
							show: false
						},
						data: data,
						itemStyle: {
							normal: {
								color: function(colors) {
									return colorList[colors.dataIndex]
								}
							}
						}
					}]
				};
				this.$nextTick(()=>{
					if(!this.$refs.percentageChartWeekDom) return;
					this.$refs.percentageChartWeekDom.init(echarts, chart => {
						chart.setOption(option);
					});
				})

			},
			contrastWeek() {
				let preMean = this.preweekMean[this.indexType]
				let todayMean = this.weekMean[this.indexType]
				let difEnd = null
				if (todayMean >= preMean) {
					let dif = (todayMean / preMean - 1) * 100
					difEnd = dif.toFixed(1)
				}
				if (todayMean < preMean) {
					let dif = (1 - todayMean / preMean) * 100
					difEnd = dif.toFixed(1)
				}
				return difEnd
			},
			dataMonth() {
				uni.$u.http.post('/client/data_month', {
					phone: this.member.phone
				}).then(res => {
					if (res.status == 200) {
						this.allMonthList = res.data.allMonthData
						this.choiceMonthNum = res.data.allMonthData.length - 1
						this.choiceMonth = res.data.allMonthData[this.choiceMonthNum]
						this.monthReport(this.loginPhone, this.choiceMonth.startTime, this.choiceMonth.endTime,
							this.allMonthList[this.choiceMonthNum - 1].startTime, this.allMonthList[this
								.choiceMonthNum - 1].endTime)
					}
				});
			},
			monthReport(phone, startTime, endTime, preStartTime, preEndTime) {
				uni.$u.http.post('/client/month_report', {
					phone,
					startTime,
					endTime,
					preStartTime,
					preEndTime
				}).then(res => {
					if (res.status == 200) {
						this.month = res.data.month
						this.premonth = res.data.premonth
						let dayEmotionSum = 0;
						let dayEmotionLn = 0;
						let dayTiredSum = 0;
						let dayTiredLn = 0;
						let dayStressSum = 0;
						let dayStressLn = 0;
						let dayEmotionA = 0;
						let dayEmotionB = 0;
						let dayEmotionC = 0;
						let dayStressA = 0;
						let dayStressB = 0;
						let dayStressC = 0;
						let dayTiredA = 0;
						let dayTiredB = 0;
						let dayTiredC = 0;
						res.data.month.forEach(item => {
							if (item.emotion != -1) {
								dayEmotionSum += item.emotion;
								dayEmotionLn += 1;
								if (item.emotion >= 0 && item.emotion <= 49) {
									dayEmotionA += 1
								}
								if (item.emotion >= 50 && item.emotion <= 69) {
									dayEmotionB += 1
								}
								if (item.emotion >= 70 && item.emotion <= 100) {
									dayEmotionC += 1
								}
							}
							if (item.tired != -1) {
								item.tired = 100-item.tired;
								dayTiredSum += item.tired;
								dayTiredLn += 1;
								if (item.tired >= 0 && item.tired <= 49) {
									dayTiredC += 1
								}
								if (item.tired >= 50 && item.tired <= 69) {
									dayTiredB += 1
								}
								if (item.tired >= 70 && item.tired <= 100) {
									dayTiredA += 1
								}
							}
							if (item.stress != -1) {
								// item.stress = 100-item.stress;
								dayStressSum += item.stress;
								dayStressLn += 1
								if (item.stress >= 0 && item.stress <= 49) {
									dayStressA += 1
								}
								if (item.stress >= 50 && item.stress <= 69) {
									dayStressB += 1
								}
								if (item.stress >= 70 && item.stress <= 100) {
									dayStressC += 1
								}
							}
						})
						let dayEmotionAll = dayEmotionA + dayEmotionB + dayEmotionC
						let dayStressAll = dayStressA + dayStressB + dayStressC
						let dayTiredAll = dayTiredA + dayTiredB + dayTiredC
						this.monthMean.emotion = parseInt(dayEmotionSum / dayEmotionLn)
						this.monthMean.tired = parseInt(dayTiredSum / dayTiredLn)
						this.monthMean.stress = parseInt(dayStressSum / dayStressLn)
						this.monthPercent.emotion = [Math.round(dayEmotionC / dayEmotionAll * 100), Math.round(
							dayEmotionB / dayEmotionAll * 100), Math.round(dayEmotionA / dayEmotionAll *
							100)]
						this.monthPercent.tired = [Math.round(dayTiredC / dayTiredAll * 100), Math.round(
							dayTiredB / dayTiredAll * 100), Math.round(dayTiredA / dayTiredAll * 100)]
						this.monthPercent.stress = [Math.round(dayStressC / dayStressAll * 100), Math.round(
							dayStressB / dayStressAll * 100), Math.round(dayStressA / dayStressAll * 100)]
						this.monthPercentAll.emotion = [{
							value: dayEmotionC
						}, {
							value: dayEmotionB
						}, {
							value: dayEmotionA
						}]
						this.monthPercentAll.stress = [{
							value: dayStressC
						}, {
							value: dayStressB
						}, {
							value: dayStressA
						}]
						this.monthPercentAll.tired = [{
							value: dayTiredA
						}, {
							value: dayTiredB
						}, {
							value: dayTiredC
						}]
						let predayEmotionSum = 0;
						let predayEmotionLn = 0;
						let predayTiredSum = 0;
						let predayTiredLn = 0;
						let predayStressSum = 0;
						let predayStressLn = 0;
						res.data.premonth.forEach(item => {
							if (item.emotion != -1) {
								predayEmotionSum += item.emotion;
								predayEmotionLn += 1;
							}
							if (item.tired != -1) {
								item.tired = 100-item.tired;
								predayTiredSum += item.tired;
								predayTiredLn += 1;
							}
							if (item.stress != -1) {
								// item.stress = 100-item.stress;
								predayStressSum += item.stress;
								predayStressLn += 1
							}
						})
						this.premonthMean.emotion = parseInt(predayEmotionSum / predayEmotionLn)
						this.premonthMean.tired = parseInt(predayTiredSum / predayTiredLn)
						this.premonthMean.stress = parseInt(predayStressSum / predayStressLn)
						if (this.month.length > 0) {
							this.percentageChartMonth()
						}
					}
				});
			},
			preMonth() {
				let num = this.choiceMonthNum
				num = num - 1
				if (num < 1) {
					this.$toast('已到最前');
					num = 1
				}
				this.choiceMonthNum = num
				this.choiceMonth = this.allMonthList[this.choiceMonthNum]
				this.monthReport(this.loginPhone, this.choiceMonth.startTime, this.choiceMonth.endTime, this.allMonthList[
					this.choiceMonthNum - 1].startTime, this.allMonthList[this.choiceMonthNum - 1].endTime)
			},
			nextMonth() {
				let num = this.choiceMonthNum
				num = num + 1
				if (num > this.allMonthList.length - 1) {
					this.$toast('已到最后');
					num = this.allMonthList.length - 1
				}
				this.choiceMonthNum = num
				this.choiceMonth = this.allMonthList[this.choiceMonthNum]
				this.monthReport(this.loginPhone, this.choiceMonth.startTime, this.choiceMonth.endTime, this.allMonthList[
					this.choiceMonthNum - 1].startTime, this.allMonthList[this.choiceMonthNum - 1].endTime)
			},
			toNowMonth() {
				this.choiceMonthNum = this.allMonthList.length - 1
				this.choiceMonth = this.allMonthList[this.choiceMonthNum]
				this.monthReport(this.imei, this.choiceMonth.startTime, this.choiceMonth.endTime, this.allMonthList[this
					.choiceMonthNum - 1].startTime, this.allMonthList[this.choiceMonthNum - 1].endTime)
			},
			percentageChartMonth() {
				let colorList = ['#55CF04', '#01D6D6', '#FF0036']
				if (this.indexType == "stress") {
					colorList = ['#FF0036', '#01D6D6', '#55CF04']
				}
				let data = this.monthPercentAll[this.indexType]
				let option = {
					series: [{
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						labelLine: {
							show: false
						},
						data: data,
						itemStyle: {
							normal: {
								color: function(colors) {
									return colorList[colors.dataIndex]
								}
							}
						}
					}]
				};
				this.$nextTick(()=>{
					if(!this.$refs.percentageChartDomMonthDom) return;
					this.$refs.percentageChartDomMonthDom.init(echarts, chart => {
						chart.setOption(option);
					});
				})
			},
			contrastMonth() {
				let preMean = this.premonthMean[this.indexType]
				let todayMean = this.monthMean[this.indexType]
				let difEnd = null
				if (todayMean >= preMean) {
					let dif = (todayMean / preMean - 1) * 100
					difEnd = dif.toFixed(1)
				}
				if (todayMean < preMean) {
					let dif = (1 - todayMean / preMean) * 100
					difEnd = dif.toFixed(1)
				}
				return difEnd
			},
			colorFilter(num) {
					if (num <= 49) {
						if (this.indexType == 'stress'){
							return '#55CF04'
						}
						return '#FF0036'
					}
					if (num >= 50 && num <= 69) {
						return '#01D6D6'
					}
					if (num >= 70 && num <= 100) {
						if (this.indexType == 'stress'){
							return '#FF0036'
						}
						return '#55CF04'
					}
			},
			testFilter(num) {
						if (this.indexType == 'emotion') {
							if (num <= 49) {
								return '较差'
							}
							if (num >= 50 && num <= 69) {
								return '一般'
							}
							if (num >= 70 && num <= 100) {
								return '愉悦'
							}
						}
						if (this.indexType == 'tired') {
							if (num <= 49) {
								return '略有疲惫'
							}
							if (num >= 50 && num <= 69) {
								return '精力适中'
							}
							if (num >= 70 && num <= 100) {
								return '精力充沛'
							}
						}
						if (this.indexType == 'stress') {
							if (num <= 49) {
								return '放松'
							}
							if (num >= 50 && num <= 69) {
								return '稍有压力'
							}
							if (num >= 70 && num <= 100) {
								return '压力较大'
							}
						}
			},
			imgFilter(num) {
				if (this.indexType == 'emotion') {
					if (num <= 49) {
						return 'emotion3'
					}
					if (num >= 50 && num <= 69) {
						return 'emotion2'
					}
					if (num >= 70 && num <= 100) {
						return 'emotion1'
					}
				}
				if (this.indexType == 'tired') {
					if (num <= 49) {
						return 'tired3'
					}
					if (num >= 50 && num <= 69) {
						return 'tired2'
					}
					if (num >= 70 && num <= 100) {
						return 'tired1'
					}
				}
				if (this.indexType == 'stress') {
					if (num <= 49) {
						return 'stress1'
					}
					if (num >= 50 && num <= 69) {
						return 'stress2'
					}
					if (num >= 70 && num <= 100) {
						return 'stress3'
					}
				}

			},
		},
		onReady() {
			let imei = uni.getStorageSync('imei')
			this.imei = imei
			let phone = uni.getStorageSync('phone')
			this.loginPhone = phone
			this.dataDay()
			this.dataWeek()
			this.dataMonth()
			let date = new Date()
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			this.choiceDay = year + '年' + month + '月' + day + '日';
			this.choiceDayTime = parseInt(date.getTime() / 1000);
			this.dayReport()
		},
		mounted() {
			if (this.today.length > 0) {
				this.percentageChartDay()
			}
		}
	};
</script>
<style lang='less' scoped>
	.report {
		padding: 16px;
	}

	.report-main {
		padding: 12px;
		background-color: #fff;
		border-radius: 10px;
	}

	.choice-header {
		border-bottom: 1px solid #F1F4F4;
		padding-bottom: 12px;
	}

	.time-index {
		height: 28px;
		display: flex;
		justify-content: space-between;
	}

	.time-type {
		height: 28px;
		border-radius: 14px;
		display: flex;
		justify-content: flex-start;
		background-color: #F5F8F8;
	}

	.time-item {
		height: 28px;
		line-height: 28px;
		width: 50px;
		border-radius: 14px;
		text-align: center;
		font-size: 14px;
		font-weight: 500;
		color: #333333;
		background-color: #F5F8F8;
	}

	.time-item-ac {
		height: 28px;
		line-height: 28px;
		width: 50px;
		border-radius: 14px;
		text-align: center;
		font-size: 14px;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #01D6D6;
	}

	.index-type {
		height: 28px;
		background-color: #F5F8F8;
		border-radius: 14px;
		display: flex;
		justify-content: center;
		width: 110px;
		position: relative;
	}

	.choice-index {
		height: 28px;
		line-height: 28px;
		font-size: 14px;
		font-weight: 500;
		color: #333;
	}

	.index-more {
		display: block;
		height: 16px;
		width: 16px;
		margin-top: 6px;
		margin-left: 5px;
	}

	.index-list {
		width: 110px;
		position: absolute;
		top: 28px;
		left: 0px;
		z-index: 11;
	}

	.index-item {
		height: 28px;
		line-height: 28px;
		text-align: center;
		background-color: #01D6D6;
		font-size: 14px;
		font-weight: 500;
		color: #fff;
		border-radius: 14px;
		margin-bottom: 5px;
	}

	.show {
		margin-top: 22px;
		height: 24px;
		display: flex;
		justify-content: space-between;
	}

	.show-type {
		height: 24px;
		border-radius: 12px;
		background-color: #F5F8F8;
		padding: 0px 10px;
	}

	.show-day,
	.show-week,
	.show-month {
		height: 24px;
		display: flex;
		justify-content: flex-start;
	}

	.choice-day,
	.choice-week,
	.choice-month {
		height: 48rpx;
		line-height: 48rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.more-day {
		display: block;
		width: 16px;
		height: 16px;
		margin-top: 4px;
		margin-left: 8px;
	}

	.pre-week,
	.pre-month {
		display: block;
		height: 16px;
		width: 16px;
		margin-top: 4px;
		margin-right: 8px;
	}

	.next-week,
	.next-month {
		display: block;
		height: 16px;
		width: 16px;
		margin-top: 4px;
		margin-left: 8px;
	}

	.back {
		height: 24px;
		line-height: 24px;
		border-radius: 16px;
		text-align: center;
		width: 72px;
		font-size: 12px;
		color: #01D6D6;
		background-color: #e5f8fc;
	}

	.chart-list {
		margin-top: 20px;
	}

	.empty-data img {
		display: block;
		width: 120px;
		height: 120px;
		margin: 20px auto;
	}

	.empty-text {
		height: 20px;
		line-height: 20px;
		font-size: 14px;
		text-align: center;
		color: #999;
		font-weight: 500;
	}

	.chart-main {
		display: flex;
		justify-content: center;
	}

	.text-tag {
		height: 200px;
	}

	.text-tag-a {
		height: 60px;
		line-height: 60px;
		font-size: 12px;
		color: #55CF04;
		font-weight: 400;
	}

	.text-tag-aa {
		height: 40px;
		line-height: 20px;
		font-size: 12px;
		color: #55CF04;
		font-weight: 400;
		width: 24px;
		margin: 10px 0px;
	}

	.text-tag-aaa {
		color:  #FF0036;
		
		
		height: 40px;
		line-height: 20px;
		font-size: 12px;
		font-weight: 400;
		width: 24px;
	}

	.text-tag-b {
		height: 40px;
		line-height: 40px;
		font-size: 12px;
		color: #01D6D6;
		font-weight: 400;
	}

	.text-tag-bb {
		height: 40px;
		line-height: 20px;
		font-size: 12px;
		color: #01D6D6;
		font-weight: 400;
		width: 24px;
	}

	.text-tag-bbb {
		height: 40px;
		line-height: 20px;
		font-size: 12px;
		color: #01D6D6;
		font-weight: 400;
		width: 24px;
	}

	.text-tag-c {
		height: 100px;
		line-height: 100px;
		font-size: 12px;
		color: #FF0036;
		font-weight: 400;
	}

	.text-tag-cc {
		height: 40px;
		line-height: 20px;
		font-size: 12px;
		color: #FF0036;
		font-weight: 400;
		width: 24px;
		margin: 30px 0px;
	}

	.text-tag-ccc {
		height: 100px;
		line-height: 100px;
		/* font-size: 12px; */
		color: #55CF04;
		/* font-weight: 400; */
		/* width: 24px; */
		
/* 		height: 40px;
		line-height: 20px; */
		font-size: 12px;
		font-weight: 400;
		width: 24px;
		margin: 10px 0px;
	}

	.chart-day {
		height: 200px;
		width: 248px;
		margin: 0px 5px;
		position: relative;
		background-color: #F5F8F8;
	}

	.chart-day-main {
		width: 240px;
		height: 200px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.dot-box {
		width: 10px;
		position: relative;
	}

	.dot {
		height: 6px;
		width: 6px;
		border-radius: 50%;
		position: absolute;
		z-index: 11;
		left: 2px;
	}

	.point-line-a {
		width: 100%;
		height: 1px;
		background-color: #E3E8E8;
		position: absolute;
		left: 0px;
		top: 60px;
	}

	.point-line-b {
		width: 100%;
		height: 1px;
		background-color: #E3E8E8;
		position: absolute;
		left: 0px;
		top: 100px;
	}

	.mean-line {
		width: 100%;
		height: 1px;
		border-bottom: 1px dashed #01D6D6;
		position: absolute;
		left: 0px;
		z-index: 8;
	}

	.mean-point {
		width: 40px;
		height: 20px;
		line-height: 20px;
		background: #01D6D6;
		border-radius: 3px;
		text-align: center;
		color: #fff;
		font-size: 12px;
		font-weight: 500;
		position: absolute;
		right: -47px;
		z-index: 8;
	}

	.line-a {
		height: 60px;
		width: 1px;
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: #55CF04;
	}

	.line-b {
		height: 40px;
		width: 1px;
		position: absolute;
		top: 60px;
		left: 0px;
		background-color: #01D6D6;
	}

	.line-c {
		height: 100px;
		width: 1px;
		position: absolute;
		top: 100px;
		left: 0px;
		background-color: #FF0036;
	}

	.line-aa {
		height: 60px;
		width: 1px;
		position: absolute;
		top: 0px;
		right: 0px;
		background-color: #55CF04;
	}

	.line-bb {
		height: 40px;
		width: 1px;
		position: absolute;
		top: 60px;
		right: 0px;
		background-color: #01D6D6;
	}

	.line-cc {
		height: 100px;
		width: 1px;
		position: absolute;
		top: 100px;
		right: 0px;
		background-color: #FF0036;
	}

	.line-d {
		height: 60px;
		width: 1px;
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: #FF0036;
	}

	.line-e {
		height: 40px;
		width: 1px;
		position: absolute;
		top: 60px;
		left: 0px;
		background-color: #01D6D6;
	}

	.line-f {
		height: 100px;
		width: 1px;
		position: absolute;
		top: 100px;
		left: 0px;
		background-color: #55CF04;
	}

	.line-dd {
		height: 60px;
		width: 1px;
		position: absolute;
		top: 0px;
		right: 0px;
		background-color: #FF0036;
	}

	.line-ee {
		height: 40px;
		width: 1px;
		position: absolute;
		top: 60px;
		right: 0px;
		background-color: #01D6D6;
	}

	.line-ff {
		height: 100px;
		width: 1px;
		position: absolute;
		top: 100px;
		right: 0px;
		background-color: #55CF04;
	}

	.num-tag {
		height: 200px;
		position: relative;
		width: 20px;
	}

	.num-tag-a {
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		color: #333333;
		font-weight: 400;
		position: absolute;
		left: 0px;
		top: 0px;
	}

	.num-tag-b {
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		color: #333333;
		font-weight: 400;
		position: absolute;
		left: 0px;
		top: 50px;
	}

	.num-tag-c {
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		color: #333333;
		font-weight: 400;
		position: absolute;
		left: 0px;
		top: 90px;
	}

	.num-tag-d {
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		color: #333333;
		font-weight: 400;
		position: absolute;
		left: 0px;
		bottom: 0px;
	}

	.day-time-list {
		width: 240px;
		margin: 0 auto;
		margin-top: 8px;
		height: 16px;
		display: flex;
		justify-content: space-between;
	}

	.day-time-item {
		height: 16px;
		line-height: 16px;
		font-size: 12px;
		color: #333333;
	}

	.data-day-modal {
		position: fixed;
		height: 100vh;
		width: 100%;
		left: 0px;
		bottom: 0px;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 100;
	}

	.data-day {
		position: relative;
		background-color: #fff;
		border-radius: 15px 15px 0px 0px;
		height: 75vh;
		margin-top: 25vh;
		overflow-y: auto;
	}

	.close {
		display: block;
		width: 30px;
		height: 30px;
		margin: 0px auto;
		// position: absolute;
		// right: 0px;
		// top: 0px;
	}

	@media (min-width: 768px) {

		/*0~768*/
		.data-day {
			width: 400px;
			margin: 0 auto;
		}
	}

	.day-month {
		padding: 5px 32px;
		margin: 5px 0px;
	}

	.month-title {
		height: 20px;
		line-height: 20px;
		margin-bottom: 10px;
		font-size: 16px;
		color: #333;
		font-weight: bolder;
		text-align: center;
	}

	.day-list {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.day-box {
		width: 14.2%;
		height: 20px;
	}

	.day {
		display: block;
		border: none;
		height: 20px;
		width: 20px;
		margin: 0 auto;
		line-height: 20px;
		text-align: center;
		font-size: 12px;
		color: #666;
		background-color: #fff;
		padding: 0px;
	}

	.day-ac {
		display: block;
		border: none;
		height: 20px;
		width: 20px;
		margin: 0 auto;
		line-height: 20px;
		text-align: center;
		font-size: 12px;
		color: #fff;
		background-color: #01D6D6;
		border-radius: 50%;
		padding: 0px;
	}

	.situation-list {
		margin-top: 40px;
	}

	.situation-title {
		height: 20px;
		line-height: 20px;
		font-size: 18px;
		font-weight: 500;
		color: #333;
		margin-bottom: 12px;
	}

	.situation-main {
		background-color: #FBFCFC;
		border-radius: 10px;
		padding: 12px;
		display: flex;
		justify-content: space-between;
	}

	.situation-main-empty {
		height: 100px;
		background-color: #FBFCFC;
		display: flex;
		justify-content: center;
	}

	.situation-main-empty img {
		width: 30px;
		height: 30px;
		margin-top: 35px;
		margin-right: 8px;
	}

	.situation-main-empty .empty-data-text {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		color: #999;
		margin-top: 35px;
	}

	.situation-end {
		height: 24px;
		display: flex;
		justify-content: flex-start;
	}

	.situation-pic {
		display: block;
		height: 24px;
		width: 24px;
		margin-right: 8px;
	}

	.situation-text {
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		font-weight: 500;
	}

	.situation-mean {
		margin-top: 12px;
		height: 24px;
		display: flex;
		justify-content: flex-start;
	}

	.situation-num {
		height: 24px;
		line-height: 24px;
		font-size: 24px;
		font-weight: 900;
		color: #333;
		margin-left: 5px;
		font-family: 'avenir';
	}

	.mean-text {
		height: 12px;
		margin-top: 12px;
		line-height: 12px;
		font-size: 12px;
		color: #333;
	}

	.contrast {
		margin-top: 12px;
		height: 16px;
		display: flex;
		justify-content: flex-start;
	}

	.pre-day {
		display: flex;
		justify-content: flex-start;
	}

	.pre-day-text {
		height: 16px;
		line-height: 16px;
		font-size: 12px;
		color: #999;
		font-weight: 400;
	}

	.pre-day-num {
		height: 16px;
		line-height: 16px;
		font-weight: 900;
		font-size: 16px;
		color: #333;
		font-family: 'avenir';
	}

	.pre-day-num-empty {
		height: 16px;
		line-height: 16px;
		font-weight: 600;
		font-size: 14px;
		color: #999;
	}

	.contrast-percent {
		margin-left: 10px;
		display: flex;
		justify-content: flex-start;
	}

	.contrast-text {
		height: 16px;
		line-height: 16px;
		font-size: 12px;
		color: #999;
		font-weight: 400;
	}

	.contrast-num {
		height: 16px;
		line-height: 16px;
		font-weight: 900;
		font-size: 16px;
		color: #333;
		font-family: 'avenir';
	}

	.contrast-chart {
		display: flex;
		justify-content: center;
		height: 70px;
		// width: 210px;
	}

	.contrast-tag-list {
		height: 70px;
		width: 52px;
	}

	.contrast-tag-a {
		font-size: 12px;
		color: #55CF04;
		height: 21px;
		line-height: 21px;
		text-align: right;
		padding-right: 5px;
	}

	.contrast-tag-b {
		height: 14px;
		line-height: 14px;
		font-size: 12px;
		color: #01D6D6;
		text-align: right;
		padding-right: 5px;
	}

	.contrast-tag-c {
		height: 35px;
		line-height: 35px;
		font-size: 12px;
		color: #FF0036;
		text-align: right;
		padding-right: 5px;
	}

	.contrast-tag-aa {
		font-size: 12px;
		color: #55CF04;
		height: 21px;
		line-height: 21px;
	}

	.contrast-tag-bb {
		height: 14px;
		line-height: 14px;
		font-size: 12px;
		color: #01D6D6;
	}

	.contrast-tag-cc {
		height: 35px;
		line-height: 35px;
		font-size: 12px;
		color: #FF0036;
	}

	.contrast-tag-aaa {
		font-size: 12px;
		color: #FF0036;
		height: 21px;
		line-height: 21px;
	}

	.contrast-tag-bbb {
		height: 14px;
		line-height: 14px;
		font-size: 12px;
		color: #01D6D6;
	}

	.contrast-tag-ccc {
		height: 35px;
		line-height: 35px;
		font-size: 12px;
		color: #55CF04;
	}

	.day-contrast-chart {
		height: 70px;
		width: 88px;
		position: relative;
		background-color: #F5F8F8;
	}

	.contrast-line-a {
		height: 21px;
		width: 1px;
		background-color: #FF0036;
		position: absolute;
		left: 0px;
		top: 0px;
	}

	.contrast-line-b {
		height: 14px;
		width: 1px;
		background-color: #01D6D6;
		position: absolute;
		left: 0px;
		top: 21px;
	}

	.contrast-line-c {
		height: 35px;
		width: 1px;
		background-color: #55CF04;
		position: absolute;
		left: 0px;
		top: 35px;
	}

	.contrast-line-aa {
		height: 21px;
		width: 1px;
		background-color: #FF0036;
		position: absolute;
		right: 0px;
		top: 0px;
	}

	.contrast-line-bb {
		height: 14px;
		width: 1px;
		background-color: #01D6D6;
		position: absolute;
		right: 0px;
		top: 21px;
	}

	.contrast-line-cc {
		height: 35px;
		width: 1px;
		background-color: #55CF04;
		position: absolute;
		right: 0px;
		top: 35px;
	}

	.contrast-line-d {
		height: 21px;
		width: 1px;
		background-color: #55CF04;
		position: absolute;
		left: 0px;
		top: 0px;
	}

	.contrast-line-e {
		height: 14px;
		width: 1px;
		background-color: #01D6D6;
		position: absolute;
		left: 0px;
		top: 21px;
	}

	.contrast-line-f {
		height: 35px;
		width: 1px;
		background-color: #FF0036;
		position: absolute;
		left: 0px;
		top: 35px;
	}

	.contrast-line-dd {
		height: 35px;
		width: 1px;
		background-color: #FF0036;
		position: absolute;
		right: 0px;
		top: 35px;
	}

	.contrast-line-ee {
		height: 14px;
		width: 1px;
		background-color: #01D6D6;
		position: absolute;
		right: 0px;
		top: 21px;
	}

	.contrast-line-ff {
		height: 21px;
		width: 1px;
		background-color: #55CF04;
		position: absolute;
		right: 0px;
		top: 0px;
	}

	.contrast-tag {
		height: 70px;
		position: relative;
		width: 24px;
		margin-left: 5px;
	}

	.contrast-a {
		height: 12px;
		line-height: 12px;
		font-size: 12px;
		color: #333333;
		position: absolute;
		top: 0px;
		left: 0px;
	}

	.contrast-b {
		height: 12px;
		line-height: 12px;
		font-size: 12px;
		color: #333333;
		position: absolute;
		top: 15px;
		left: 0px;
	}

	.contrast-c {
		height: 12px;
		line-height: 12px;
		font-size: 12px;
		color: #333333;
		position: absolute;
		top: 29px;
		left: 0px;
	}

	.contrast-d {
		height: 12px;
		line-height: 12px;
		font-size: 12px;
		color: #333333;
		position: absolute;
		bottom: 0px;
		left: 0px;
	}

	.contrast-point-line-a {
		height: 1px;
		width: 88px;
		background-color: #E3E8E8;
		position: absolute;
		left: 0px;
		top: 21px;
	}

	.contrast-point-line-b {
		height: 1px;
		width: 88px;
		background-color: #E3E8E8;
		position: absolute;
		left: 0px;
		top: 35px;
	}

	.contrast-date-list {
		width: 80px;
		margin: 0px auto;
		display: flex;
		justify-content: space-around;
		position: absolute;
		left: 4px;
		bottom: -20px;
	}

	.contrast-preday {
		height: 12px;
		font-size: 12px;
		color: #333;
		line-height: 12px;
	}

	.contrast-today {
		height: 12px;
		font-size: 12px;
		color: #333;
		line-height: 12px;
	}

	.day-contrast-chart-main {
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		height: 100%;
	}

	.column-box {
		width: 20px;
		position: relative;
	}

	.preday-column {
		width: 20px;
		border-radius: 6px 6px 0px 0px;
		position: absolute;
		left: 0px;
		bottom: 0px;
		z-index: 10;
	}

	.today-column {
		width: 20px;
		border-radius: 6px 6px 0px 0px;
		position: absolute;
		left: 0px;
		bottom: 0px;
		z-index: 10;
	}

	.percentage-list {
		margin-top: 40px;
	}

	.percentage-title {
		height: 20px;
		line-height: 20px;
		font-size: 18px;
		font-weight: 500;
		color: #333;
		margin-bottom: 12px;
	}

	.percentage-main {
		display: flex;
		justify-content: space-around;
		background-color: #FBFCFC;
		border-radius: 10px;
		padding: 12px;
		position: relative;
	}

	.percentage-empty {
		width: 100%;
		height: 33px;
		display: flex;
		justify-content: center;
		position: absolute;
		left: 0px;
		top: 0px;
		height: 100px;
		z-index: 100;
		background-color: #FBFCFC;
	}

	.percentage-empty img {
		width: 30px;
		height: 30px;
		margin-right: 8px;
		margin-top: 35px;
	}

	.empty-data-text {
		height: 33px;
		line-height: 33px;
		font-size: 12px;
		text-align: center;
		color: #999;
		margin-top: 35px;
	}

	.percentage-chart {
		height: 90px;
		width: 90px;
	}

	.percentage-point {
		height: 90px;
	}

	.percentage-point-item {
		height: 30px;
		display: flex;
		justify-content: flex-start;
	}

	.item-point-color {
		height: 14px;
		width: 14px;
		border-radius: 50%;
		margin-top: 8px;
	}

	.percentage-a {
		background-color: #55CF04;
	}

	.percentage-b {
		background-color: #01D6D6;
	}

	.percentage-c {
		background-color: #FF0036;
	}

	.percentage-aa {
		background-color: #FF0036;
	}

	.percentage-bb {
		background-color: #01D6D6;
	}

	.percentage-cc {
		background-color: #55CF04;
	}

	.item-point-text {
		height: 30px;
		line-height: 30px;
		font-weight: 500;
		color: #333;
		font-size: 14px;
		margin: 0px 10px;
	}

	.item-point-num {
		height: 30px;
		line-height: 30px;
		font-weight: 500;
		color: #333;
		font-size: 14px;
	}

	.percentage-num {
		height: 90px;
	}

	.percentage-num-item {
		height: 30px;
		line-height: 30px;
		font-weight: 500;
		color: #333;
		font-size: 14px;
		text-align: right;
	}

	.chart-week {
		height: 200px;
		width: 248px;
		margin: 0px 5px;
		position: relative;
		background-color: #F5F8F8;
	}

	.week-time-list {
		width: 240px;
		margin: 0 auto;
		margin-top: 8px;
		height: 16px;
		display: flex;
		justify-content: space-around;
	}

	.week-time-item {
		height: 16px;
		line-height: 16px;
		font-size: 12px;
		color: #333333;
	}

	.chart-week-main {
		width: 240px;
		height: 200px;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
	}

	.bar-box {
		width: 20px;
		height: 200px;
		position: relative;
	}

	.bar {
		width: 20px;
		border-radius: 6px 6px 0px 0px;
		position: absolute;
		left: 0px;
		bottom: 0px;
		z-index: 5;
	}

	.day-chart {
		position: relative;
	}

	.week-chart {
		position: relative;
	}

	.month-chart {
		position: relative;
	}

	.chart-month-main {
		width: 240px;
		height: 200px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.bar-box-month,
	.bar-box-day {
		width: 4px;
		height: 200px;
		position: relative;
	}

	.bar-month,
	.bar-day {
		width: 4px;
		border-radius: 1px 1px 0px 0px;
		position: absolute;
		left: 0px;
		bottom: 0px;
		z-index: 5;
	}

	.chart-month {
		height: 200px;
		width: 248px;
		margin: 0px 5px;
		position: relative;
		background-color: #F5F8F8;
	}

	.month-time-list {
		width: 240px;
		margin: 0 auto;
		margin-top: 8px;
		height: 16px;
		display: flex;
		justify-content: space-between;
	}

	.month-time-item {
		height: 16px;
		line-height: 16px;
		font-size: 12px;
		color: #333333;
	}
</style>